import TopicInput from './TopicInput.js';
import ControlButtons from './ControlButtons.js';

class Header {
  constructor(onTopicChange, onStart, onPause, onResume, onRestart, onNextRound, chatArea) {
    this.topicInput = new TopicInput(onTopicChange);
    this.controlButtons = new ControlButtons(onStart, onPause, onResume, onRestart, onNextRound);
    this.statusIndicator = document.createElement('span');
    this.chatArea = chatArea;
  }

  updateControls(status) {
    switch (status) {
      case 'idle':
        this.controlButtons.setDisabled('start', false);
        this.controlButtons.setDisabled('pause', true);
        this.controlButtons.setDisabled('resume', true);
        this.controlButtons.setDisabled('next', true);
        this.controlButtons.setDisabled('restart', true);
        break;
      case 'ready':
        this.controlButtons.setDisabled('start', false);
        this.controlButtons.setDisabled('pause', true);
        this.controlButtons.setDisabled('resume', true);
        this.controlButtons.setDisabled('next', true);
        this.controlButtons.setDisabled('restart', true);
        break;
      case 'in_progress':
        this.controlButtons.setDisabled('start', true);
        this.controlButtons.setDisabled('pause', false);
        this.controlButtons.setDisabled('resume', true);
        this.controlButtons.setDisabled('next', true); // 自动模式下禁用下一轮
        this.controlButtons.setDisabled('restart', false);
        break;
      case 'paused':
        this.controlButtons.setDisabled('start', true);
        this.controlButtons.setDisabled('pause', true);
        this.controlButtons.setDisabled('resume', false);
        this.controlButtons.setDisabled('next', false); // 手动模式下启用下一轮
        this.controlButtons.setDisabled('restart', false);
        break;
      case 'ended':
        this.controlButtons.setDisabled('start', true);
        this.controlButtons.setDisabled('pause', true);
        this.controlButtons.setDisabled('resume', true);
        this.controlButtons.setDisabled('next', true);
        this.controlButtons.setDisabled('restart', false);
        break;
    }
  }

  setStatus(status) {
    // 将状态映射为中文
    const statusMap = {
      'idle': '空闲',
      'ready': '准备中',
      'in_progress': '进行中',
      'paused': '已暂停',
      'ended': '已结束'
    };
    this.statusIndicator.textContent = statusMap[status] || status;
    // 移除所有状态类
    this.statusIndicator.classList.remove(
      'status-idle',
      'status-ready',
      'status-in_progress',
      'status-paused',
      'status-ended'
    );
    // 添加当前状态类
    this.statusIndicator.classList.add(`status-${status}`);
  }

  clearTopic() {
    this.topicInput.clear();
  }

  setButtonDisabled(buttonName, disabled) {
    this.controlButtons.setDisabled(buttonName, disabled);
  }

  getCurrentTopic() {
    return this.topicInput.getCurrentTopic();
  }

  render() {
    const layoutContainer = document.createElement('div');
    layoutContainer.classList.add('main-layout');

    const headerContainer = document.createElement('div');
    headerContainer.classList.add('header-container');

    // 添加话题输入框
    headerContainer.appendChild(this.topicInput.render());

    // 添加控制按钮并更新状态
    headerContainer.appendChild(this.controlButtons.render());
    this.updateControls(this.chatArea?.debateState?.status || 'idle');

    // 添加状态指示器
    this.statusIndicator.textContent = '准备中...';
    headerContainer.appendChild(this.statusIndicator);

    layoutContainer.appendChild(headerContainer);
    return layoutContainer;
  }
}

export default Header;
